/* 
    安装babel-plugin
        yarn add babel-plugin-styled-components
    添加babel配置
        "plugins": ["babel-plugin-styled-components"]
    
    作用：
        1、在样式组件渲染出的，原生根标签上，添加 带有组件名的 类名，在浏览器上看html就能明白哪个标签是哪个样式组件渲染出来的

        2、在react dev tool 中的组件树中 ，不再显示 styled.tagname 作为样式组件名，而是显示实际命名的组件名，这样调试的时候就能很快找到对应的组件
*/
import React from 'react';
import styled from 'styled-components';
const Sun = styled.div`
  background-color: #fff;
`;
const Son = styled.div`
  background-color: green;
`;

const Father = styled.div`
  background-color: red;
`;

const Test = () => {
  return (
    <>
      <Father>
        我是爷爷
        <Son>
          我是儿子
          <Sun>我是孙子</Sun>
        </Son>
      </Father>
    </>
  );
};
export default Test;
